<template>
  <div class="group">
    <div class="a_button" :class="aButtonActive==='1'? 'active': ''" @click="change('1')">今天</div>
    <div class="a_button left_border" :class="aButtonActive==='2'? 'active': ''" @click="change('2')">本周</div>
    <div class="a_button left_border" :class="aButtonActive==='3'? 'active': ''" @click="change('3')">历史</div>
  </div>
</template>

<script>
export default {
  name: "button_group",
  data() {
    return {
      aButtonActive: '1',
    }
  },
  methods: {
    change(active){
      this.aButtonActive = active
      if(active === '1'){
        this.$emit('getTodayData')
      }else if(active === '2'){
        this.$emit('getWeekData')
      }else if(active === '3'){
        this.$emit('getHistoryData')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.group {
  display: flex;
  background-color: #12286b;
  width: 100%;
  height: 100%;

  .a_button {
    cursor: pointer;
    text-align: center;
    padding-top: 4%;
    height: 100%;
    width: 33.33%;
  }
  .left_border {
    border-left:1px solid #0e3b89
  }
  .a_button.active{
    background-color: #3d70ee;
  }
}
</style>
